<template>
<div>
  <van-cell
    v-for="item in newSongList"
    center
    @click="toComment(item.id)"
    :key="item.id"
    :title="item.name"
    :label="item | isHot">
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon
      name="play-circle-o"
      class="search-icon"
      @touchstart="toPlay(item.id)"
      color="rgb(181,181,181)" />
    </template>
  </van-cell>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MusicList',
  props: {
    songMusic: {
      default: '',
      typeof: String
    }
  },
  computed: {
    ...mapState(['newSongList'])
  },
  filters: {
    isHot (item) {
      if (item.song) {
        // console.log('热搜')
        return item.song.artists[0].name + ' - ' + item.name
      } else {
        // console.log('搜索')
        return item.ar[0].name + ' - ' + item.al.name
      }
    }
  },
  methods: {
    toPlay (id) {
      this.$router.push({
        path: '/play',
        query: {
          id
        }
      })
      console.log(id)
    },
    toComment (id) { // 跳转评论路由
      this.$router.push({
        path: '/comment',
        query: {
          id
        }
      })
    }
  },
  created () {
    if (this.songMusic !== '') {
      this.$store.dispatch('searchSong', this.songMusic)
    } else {
      // 获取最新歌曲/
      this.$store.dispatch('getNewSong')
    }
  }
}
</script>

<style lang="less" scoped>
.search-icon {
  font-size: 22px;
  line-height: inherit;
}
</style>
